import React from 'react';
import { StyleSheet,Image,View,ScrollView,StatusBar } from 'react-native';
import { ListItem ,Button  } from 'react-native-elements';
import Icon from 'react-native-vector-icons/Ionicons';

import { connect } from 'react-redux'

class SettingsScreen extends React.Component {
  static navigationOptions = {
    title: '个人中心',
    headerStyle: {
      backgroundColor: '#FFF',
    },
    
  };

  render() {
    let {nick_name,long_id,user_head}=this.props.user.data;
    const list = [
      {
        title: '视频',
        icon: 'ios-color-palette',
        color:'#673AB7',
        to:'MineQRScreen'
      },
      {
        title: '消息',
        icon: 'ios-contacts',
        color:'#8BC34A',
        to:'Setting'
      },
      {
        title: '邀请',
        icon: 'ios-photos',
        color:'#00BCD4',
      },
    ];

    /* Go ahead and delete ExpoConfigView and replace it with your
     * content, we just wanted to give you a quick view of your config */
    return (
      <View style={styles.container}>
      <ScrollView>
        <ListItem
            title={nick_name}
            titleStyle={{fontSize: 20,fontWeight: 'bold'}}
            subtitle={'用户：'+long_id}
            subtitleStyle={{color:'#6e6e6e',marginTop:10}}
            leftElement={<Image
              source={ {uri:user_head} }
              style={styles.welcomeImage}
            />}
            onPress={()=>this.props.navigation.navigate('MineDetail')}
            rightIcon={{name: 'ios-arrow-forward',type:'ionicon',color:'#6e6e6e'}}
            bottomDivider={true}
          />

        <ListItem
            title='钱包'
            leftElement={<Icon name="ios-card" color='#F44336' size={26} style={{width:28}}/>}
            rightIcon={{name: 'ios-arrow-forward',type:'ionicon',color:'#6e6e6e'}}
            bottomDivider={true}
            onPress={()=>this.props.navigation.navigate('Wallet')}
            style={{marginBottom:10,marginTop:10}}
          />

      {
        list.map((item, i) => (
          <ListItem
            key={i}
            title={item.title}
            leftElement={<Icon name={item.icon} color={item.color} size={26} style={{width:28,alignSelf:'center'}}/>}
            bottomDivider={true}
            rightIcon={{name: 'ios-arrow-forward',type:'ionicon',color:'#6e6e6e'}}
            onPress={()=>{ item.to && this.props.navigation.navigate(item.to)} }
          />
        ))
      }

        <ListItem
            title='设置'
            leftElement={<Icon name="ios-settings" color='#3F51B5' size={26} style={{width:28}}/>}
            rightIcon={{name: 'ios-arrow-forward',type:'ionicon',color:'#6e6e6e'}}
            bottomDivider={true}
            style={{marginBottom:10,marginTop:10}}
            onPress={()=>this.props.navigation.navigate('Setting') }
          />

    </ScrollView>
    </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  developmentModeText: {
    marginBottom: 20,
    color: 'rgba(0,0,0,0.4)',
    fontSize: 14,
    lineHeight: 19,
    textAlign: 'center',
  },
  contentContainer: {
    paddingTop: 30,
  },
  welcomeContainer: {
    alignItems: 'center',
    marginTop: 10,
    marginBottom: 20,
  },
  welcomeImage: {
    width: 64,
    height:64,
    resizeMode: 'contain',
  },
  getStartedContainer: {
    alignItems: 'center',
    marginHorizontal: 50,
  },
  homeScreenFilename: {
    marginVertical: 7,
  },
  codeHighlightText: {
    color: 'rgba(96,100,109, 0.8)',
  },
  codeHighlightContainer: {
    backgroundColor: 'rgba(0,0,0,0.05)',
    borderRadius: 3,
    paddingHorizontal: 4,
  },
  getStartedText: {
    fontSize: 17,
    color: 'rgba(96,100,109, 1)',
    lineHeight: 24,
    textAlign: 'center',
  },
  tabBarInfoContainer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    shadowColor: 'black',
    shadowOffset: { height: -3 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    alignItems: 'center',
    backgroundColor: '#fbfbfb',
    paddingVertical: 20,
  },
  tabBarInfoText: {
    fontSize: 17,
    color: 'rgba(96,100,109, 1)',
    textAlign: 'center',
  },
  navigationFilename: {
    marginTop: 5,
  },
  helpContainer: {
    marginTop: 15,
    alignItems: 'center',
  },
  helpLink: {
    paddingVertical: 15,
  },
  helpLinkText: {
    fontSize: 14,
    color: '#2e78b7',
  },
});
export default connect(({ user }) => ({user,}))(SettingsScreen);